.card {
  border-radius: 8px;
  background: white;
  padding: 24px;
}

.article-detail-card {
  margin-top: 24px;

  .body {
    max-width: 700px;
    margin: auto;

    h2 {
      font-weight: bold;
      text-align: center;
      margin-bottom: 16px;
    }
    .caption {
      font-size: 14px;
      color: #989898;
      text-align: center;
      margin-bottom: 16px;
    }
  }
}

.right-container {
  display: flex;
  flex-direction: column;
  margin-top: 72px;
  padding-right: 24px;

  .user-detail-card {
    .user {
      .avatar {
        height: 40px;
        width: 40px;
        border-radius: 8px;
        object-fit: cover;
      }
      .name {
        margin-left: 8px;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .user-statistics {
      margin-left: 48px;
      color: #989898;
      margin-top: 8px;
    }
  }
  .user-relative-articles {
    margin-top: 24px;

    .title {
      color: #7d7d7d;
      font-weight: bold;
    }

    .article-link {
      position: relative;
      font-size: 16px;
      padding-left: 14px;
      margin-top: 16px;
      &::before {
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 3px;
        top: 9px;
        left: 0;
      }
    }

    .pending {
      font-weight: bold;
      &::before {
        border: 1px solid #C8C8C8;
      }
    }
    .done {
      color: #989898;
      &::before {
        background-color: #52C41A;
      }
    }
  }
}
